<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React使用ReactDOM渲染页面</title>
</head>
<body>
<div id="app">
<!--    使用React中的ReactDOM.render()方法会会覆盖掉父级标签下面的所有元素，所以button不会被渲染出来了，所以需要将原有的标签写到。-->
<!--    <button class="change-btn">点击修改内容</button>-->
</div>

</body>

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel">
    let message = 'Hello world！';
    render();
    function changeContentFn() {
        message = 'hello react';
        console.log(message)
        render();
    }

    function render () {
        ReactDOM.render((
            <div>
                <h1>{message}</h1>
                <button className="change-btn">点击修改内容</button>
            </div>
        ), document.getElementById('app'))

    }

    const btnEl = document.getElementsByClassName("change-btn")[0]
    btnEl.addEventListener('click',changeContentFn)
</script>
</html>